<template>
  <el-container class="news-container">
    <el-aside width="200px">
      <el-menu :default-active="nt" @select="selectNewsList">
        <el-menu-item v-for="item of newsTypeList" :index="item.id">
          <span slot="title">{{ item.newsTypeName }}</span>
        </el-menu-item>
      </el-menu>
    </el-aside>
    <el-main>
      <el-row>
        <el-col :span="5">
          <el-input v-model="keyword" placeholder="关键字"></el-input>
        </el-col>
        <el-col :span="2">
          <el-button type="success" @click="clickSelect">查询</el-button>
        </el-col>
      </el-row>
      <el-row>
        <el-col>
          <el-table
              class="link"
              :data="newsData"
              :show-header="false">
            <el-table-column>
              <template slot-scope="scope">
                <span class="point">•</span>
                <span @click="toNewsDes(scope.row.nid)" class="title">
                {{ scope.row.newsTitle }}
              </span>
                <span class="views">
                <i class="fa fa-eye">:{{ scope.row.lookNum }}</i>
              </span>
                <span class="time">
                <i class="el-icon-time">
                  {{ scope.row.createdTime }}
                </i>
              </span>
              </template>
            </el-table-column>
          </el-table>

          <vxe-pager
              :current-page.sync="page.currentPage"
              :page-size.sync="page.pageSize"
              :total="page.total"
              @page-change="handlePageChange"
              :layouts="['PrevJump', 'PrevPage', 'Number', 'NextPage', 'NextJump', 'FullJump', 'Total']">
          </vxe-pager>
        </el-col>
      </el-row>
    </el-main>
  </el-container>
</template>

<script>
import {newListImmune, newsTypeListImmune} from "@/api/operations-center/news";
import merge from "webpack-merge";

export default {
  name: 'National',
  data() {
    return {
      newsTypeList: [],
      nt: '',
      keyword: '',
      newsData: [],
      page: {
        currentPage: 1,
        pageSize: 10,
        total: 0
      },
    };
  },
  methods: {
    /**
     * {获取新闻分类}
     *
     * @author: 宋康
     * @date: 2022/8/29 09:13
     */
    queryNewsType() {
      newsTypeListImmune().then(res => {
        if (res.status) {
          this.newsTypeList = res.data;
          this.nt = this.$route.query.nt || this.newsTypeList[0].id + '';
          this.selectNewsList(this.nt);
        }
      })
    },
    /**
     * {点击新闻分类触发}
     *
     * @author: 宋康
     * @date: 2022/8/29 17:14
     */
    selectNewsList(index) {
      if ('-1' !== index) {
        this.nt = index;
        this.$router.replace({
          query: merge(this.$route.query, {
            nt: index,
            t: '123'
          })
        });
        this.clickSelect();
      }
    },
    /**
     * {点击查询触发}
     *
     * @author: 宋康
     * @date: 2022/8/29 17:38
     */
    clickSelect() {
      this.page.currentPage = 1;
      this.queryNews();
    },
    /**
     * {分页}
     *
     * @author: 宋康
     * @date: 2022/8/25 11:17
     */
    handlePageChange({currentPage, pageSize}) {
      this.page.currentPage = currentPage;
      this.page.pageSize = pageSize;
      this.queryNews();
    },
    /**
     * {获取新闻}
     *
     * @author: 宋康
     * @date: 2022/8/29 17:15
     */
    queryNews() {
      let formInline = {
        keyword: this.keyword,
        typeId: this.nt,
        startDate: "",
        endDate: "",
      }
      newListImmune(this.page.currentPage, this.page.pageSize, formInline).then(res => {
        if (res.status) {
          let data = res.data;
          this.page.total = data.total;
          this.newsData = data.records;
        }
      })
    },
    /**
     * {跳转新闻详情页}
     *
     * @author: 宋康
     * @date: 2022/8/27 17:09
     */
    toNewsDes(nid) {
      this.$router.push({
        path: "/news/NewsNational",
        query: {
          nid: nid,
          nt: this.nt
        }
      });
    }
  },
  mounted() {
    this.queryNewsType();
  },
  watch: {
    $route(n) {
      if (!n.query.t) {
        this.selectNewsList(n.query.nt);
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.news-container {
  margin: 25px 0;
  background-color: #ffffff;
  min-height: 600px;
}

.news-header {
  background-color: transparent;
}

.key {
  min-width: 150px;
  max-width: 250px;
  max-height: 40px;
  font-size: 14px;
  margin-right: 80px;
  float: right;

  .search-box {
    min-width: 100px;
    max-width: 200px;
    max-height: 40px;

    &::v-deep.el-input__inner {
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
    }
  }

  .search {
    position: absolute;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    background-color: #f5f7fa;
  }
}

.point {
  width: 15px;
  float: left;
  font-size: 30px;
  line-height: 40px;
  margin-left: -5px;
}

.title {
  color: #111;
  cursor: pointer;
}

.time {
  font-size: 13px;
  color: #706e6e;
  float: right;
  line-height: 40px;
}

.views {
  font-size: 12px;
  color: #706e6e;
  position: absolute;
  left: 0;
  margin-top: 20px;
  padding-left: 25px;
}
</style>


<style lang="scss" scoped>
.el-menu {
  border-radius: 5px;
  text-align: center;

  &::v-deep.el-submenu__title {
    border-radius: 5px;
  }

  .el-menu-item {
    border-radius: 5px;
  }
}
</style>